import React, { useContext } from 'react'
import "./index.css"

//先把提供值的这个context对象引入
import { App1Context } from '../../App'
import { App2Context } from '../../App'

import Item from './Item'

export default function List() {
  //可以使用useContext Hook方法接受某个对象提供的数据
  const todoList = useContext(App1Context);
  const setTodoList = useContext(App2Context);

  return (
    <ul className="todo-main">
      {
        todoList.map((item) => {
          return <Item key={item.id} {...item} todoList = {todoList} setTodoList = {setTodoList}/>
        })
      }
    </ul>
  )
}
